<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div class="content">
        <div class="content-head">
          <div class="content-head__left">
            <img :src="dataDetail.goodImage" alt="" />
          </div>
          <div class="content-head__right">
            <div class="head-right__up">
              <div class="book-name" style="font-weight: 700">
                {{ dataDetail.goodName }}
              </div>
              <div class="book-editor">{{ dataDetail.goodManufacturer }}</div>
              <!-- <div class="book-number">ISBN：20154987</div> -->
              <div class="book-number">ISBN：{{ dataDetail.goodId }}</div>
            </div>
            <div class="head-right__down">
              <van-rate
                v-model="dataDetail.goodLocation"
                color="rgb(2, 117, 113)"
                :readonly="true"
              />
              <!-- <u-rate  inactive-color="#b2b2b2" allowHalf readonly :count="5"
							></u-rate> -->
            </div>
          </div>
        </div>
        <div class="content-body">
          <div class="content-body__title">
            <div class="BTtb" style="background: rgb(2, 117, 113)"></div>
            <h2 class="WZ_size_16">简介</h2>
          </div>
          <div class="content-body__info">
            {{ dataDetail.goodDescription }}
          </div>
        </div>
        <div class="DI">
          <div
            class="DI_bottom"
            @click="childTap(dataDetail)"
            v-if="dataDetail.goodRemainQty != 0"
          >
            借 阅
          </div>
          <div style="background: #c8c9cc" class="DI_bottom" v-else>已借出</div>
          <!-- <div class="DI_bottom" @click="RLxx">
					{{ titleRYxx }}
				</div> -->
        </div>
      </div>
    </div>
    <ReL
      @calendar="calendar"
      @closeCalendar="closeCalendar"
      :dateshow="dateshow"
    />
  </div>
</template>

<script>
import headerXX from "../../components/title.vue";
import { getAccessToken } from "../../common/YYSLxx.js";
import moment from "moment";
import ReL from "../../components/ReL.vue";
export default {
  components: { headerXX, ReL },
  data() {
    return {
      title: "图书介绍",
      siteData: JSON.parse(localStorage.getItem("siteData")),
      dataDetail: {},
      dateshow: false,
      objXX: {},
      dateXX: "",
    };
  },
  created() {
    this.dataDetail = JSON.parse(decodeURIComponent(this.$route.query.XX));
  },
  mounted() {},
  methods: {
    closeCalendar(val) {
      this.dateshow = val;
    },
    calendar(e) {
      this.dateshow = false;
      this.dateXX = e;
      const currentTimeStamp = moment().unix();
      const min = BigInt("1" + "0".repeat(18)); // 10^18
      const max = BigInt("1" + "0".repeat(19)); // 10^19
      const randomNum =
        min + BigInt(Math.floor(Math.random() * Number(max - min)));
      let itemXX = {
        SBBT: "共享书屋",
        orderNumber: currentTimeStamp + randomNum.toString(), //预约编号
        siteId: this.siteData.id,
        orderProject: this.title, //预约项目
        goodInfo: [
          {
            id: this.objXX.goodId,
            requestQty: 1,
            siteId: this.siteData.id,
          },
        ],
        orderProjectType: "0", //0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), //下单时间
        estimateArrivalTime: this.dateXX, //预估时间
        estimateArrivalTimeTitle: "归还日期",
        estimateSumPrice: "", //预估费用
        orderSubType: "", //预约类型
        serviceDescription: "", //服务介绍
        orderLocation: "", //预约地址(非空展示)
        serviceTip: "", //温馨提示(非空展示)
        goodSumPrice: "", //总价
        serviceTitleList: ["书名", "", "数量", ""], //服务标题
        goodList: [
          {
            goodId: this.objXX.goodId,
            goodName: this.objXX.goodName,
            servicePrice: "",
            serviceQty: "1",
            goodCountPrice: "",
            goodQty: "1",
            serviceProjectName: "",
            serviceProjectNameTitle: "",
            remark: "",
            remarkTitle: "",
            serviceMessage: "",
            serviceMessageTitle: "",
          },
        ],
      };
      //console.log(itemXX);
      getAccessToken(itemXX, "共享书屋");
    },
    childTap(val) {
      this.dateshow = true;
      this.objXX = val;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
.content {
  padding: 10px 20px;
  box-sizing: border-box;
  .content-head {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .content-head__left {
      width: 33%;

      img {
        width: 100%;
      }
    }

    .content-head__right {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .book-name {
        font-size: 15px;
        font-weight: 500;
        margin: 10px 0;
      }

      .book-editor {
        font-size: 10px;
        margin: 8px 0;
      }

      .book-number {
        font-size: 10px;
        color: rgb(128, 128, 128);
        margin: 5px 0;
      }

      .head-right__down {
        display: flex;
        align-items: flex-end;

        .point {
          font-size: 16px;
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
  }

  .content-body {
    margin-top: 15px;

    .content-body__title {
      display: flex;
      align-items: center;

      div {
        width: 5px;
        height: 15px;
        margin: 0 5px;
      }

      text {
        font-size: 14px;
        font-weight: 500;
      }
    }

    .content-body__info {
      margin-top: 15px;
      font-size: 12px;
      letter-spacing: 1px;
      height: calc(100vh - 350px);
      overflow: auto;
      text-indent: 2ch;
      line-height: 20px;
    }
  }

  .DI {
    position: fixed;
    z-index: 999;
    width: 90%;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, -10px);
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
  }

  .DI_bottom {
    width: 100%;
    height: 100rpx;
    line-height: 50px;
    background: rgb(2, 117, 113);
    color: #fff;
    border-radius: 5px;
  }
}
.BTtb {
  width: 5px;
  height: 20px;
  border-radius: 12px;
}
</style>